<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.github.io/blog/posts/jquery-%E7%9A%84%E5%8A%9F%E8%83%BD/">
<link rel="preload" as="style" href="/blog/bundle.css?v=1598028633" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1598028633" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>



<title>jQuery 的功能 : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="jQuery 的功能">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.github.io/blog/posts/jquery-%E7%9A%84%E5%8A%9F%E8%83%BD/">
<link rel="image_src" href="https://Mia-zhao.github.io/blog/">
<meta property="og:image" content="https://Mia-zhao.github.io/blog/">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="这篇博文主要为了个人学习目的。 jQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。 1 获取元素 jQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性jQuery给开发者以使用jQuery 的函数和属性等，$是jQuery的别名。例如， $( document ) // 获取整个文档$( &amp;quot;*&amp;quot; ) // 获取所有元素$( &amp;quot;#elementID&amp;quot; ) // 获取ID为&amp;rsquo;elementID&amp;rsquo;的元素jQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery 选择器文档中提到。 在使用$获取到某些元素后还可以用继续用find获取其子元素。例如， $( &amp;quot;#elementID&amp;quot; ).find( &amp;quot;div&amp;quot; ) // 在获取的elementID元素的子元素中获取div元素值得注意的是find不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如， const allListElements = $( &amp;quot;li&amp;quot; )$( &amp;quot;div&amp;quot; ).find( allListElements )2 链式操作 jQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如， $( &amp;quot;div&amp;quot; ).addClass( &amp;quot;new-class&amp;quot; ).css( &amp;quot;color&amp;quot;, &amp;quot;red&amp;quot; )// 给所有div元素加一个类&amp;quot;new-class&amp;quot;并把样式颜色设置为&amp;quot;red&amp;quot;这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用find和end。 3 创建元素 用append可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用prepend插入作为第一个子元素。appendTo实现与append相同的功能，只是语法不同，a.">
<meta name="description" content="这篇博文主要为了个人学习目的。 jQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。 1 获取元素 jQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性jQuery给开发者以使用jQuery 的函数和属性等，$是jQuery的别名。例如， $( document ) // 获取整个文档$( &amp;quot;*&amp;quot; ) // 获取所有元素$( &amp;quot;#elementID&amp;quot; ) // 获取ID为&amp;rsquo;elementID&amp;rsquo;的元素jQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery 选择器文档中提到。 在使用$获取到某些元素后还可以用继续用find获取其子元素。例如， $( &amp;quot;#elementID&amp;quot; ).find( &amp;quot;div&amp;quot; ) // 在获取的elementID元素的子元素中获取div元素值得注意的是find不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如， const allListElements = $( &amp;quot;li&amp;quot; )$( &amp;quot;div&amp;quot; ).find( allListElements )2 链式操作 jQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如， $( &amp;quot;div&amp;quot; ).addClass( &amp;quot;new-class&amp;quot; ).css( &amp;quot;color&amp;quot;, &amp;quot;red&amp;quot; )// 给所有div元素加一个类&amp;quot;new-class&amp;quot;并把样式颜色设置为&amp;quot;red&amp;quot;这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用find和end。 3 创建元素 用append可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用prepend插入作为第一个子元素。appendTo实现与append相同的功能，只是语法不同，a.">
<meta property="og:updated_time" content="2020-08-12T07:06:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://Mia-zhao.github.io/blog/">
<meta property="article:published_time" content="2020-08-12T07:06:00Z">
<meta property="article:modified_time" content="2020-08-12T07:06:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "jQuery 的功能",
  "alternativeHeadline": "这篇博文主要为了个人学习目的。 jQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。 1 获取元素 jQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性jQuery给开发者以使用jQuery 的函数和属性等，$是jQuery的别名。例如， $( document ) // 获取整个文档\r$( \u0026quot;*\u0026quot; ) // 获取所有元素\r$( \u0026quot;#elementID\u0026quot; ) // 获取ID为\u0026rsquo;elementID\u0026rsquo;的元素\rjQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery 选择器文档中提到。 在使用$获取到某些元素后还可以用继续用find获取其子元素。例如， $( \u0026quot;#elementID\u0026quot; ).find( \u0026quot;div\u0026quot; ) // 在获取的elementID元素的子元素中获取div元素\r值得注意的是find不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如， const allListElements = $( \u0026quot;li\u0026quot; )\r$( \u0026quot;div\u0026quot; ).find( allListElements )\r2 链式操作 jQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如， $( \u0026quot;div\u0026quot; ).addClass( \u0026quot;new-class\u0026quot; ).css( \u0026quot;color\u0026quot;, \u0026quot;red\u0026quot; )\r// 给所有div元素加一个类\u0026quot;new-class\u0026quot;并把样式颜色设置为\u0026quot;red\u0026quot;\r这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用find和end。 3 创建元素 用append可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用prepend插入作为第一个子元素。appendTo实现与append相同的功能，只是语法不同，a.",
  "url": "https://Mia-zhao.github.io/blog/posts/jquery-%E7%9A%84%E5%8A%9F%E8%83%BD/",
  "image": "https://Mia-zhao.github.io/blog/",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.github.io/blog/posts/jquery-%E7%9A%84%E5%8A%9F%E8%83%BD/"
  },
  "description": "这篇博文主要为了个人学习目的。 jQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。 1 获取元素 jQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性jQuery给开发者以使用jQuery 的函数和属性等，$是jQuery的别名。例如， $( document ) // 获取整个文档\r$( \u0026quot;*\u0026quot; ) // 获取所有元素\r$( \u0026quot;#elementID\u0026quot; ) // 获取ID为\u0026rsquo;elementID\u0026rsquo;的元素\rjQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery 选择器文档中提到。 在使用$获取到某些元素后还可以用继续用find获取其子元素。例如， $( \u0026quot;#elementID\u0026quot; ).find( \u0026quot;div\u0026quot; ) // 在获取的elementID元素的子元素中获取div元素\r值得注意的是find不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如， const allListElements = $( \u0026quot;li\u0026quot; )\r$( \u0026quot;div\u0026quot; ).find( allListElements )\r2 链式操作 jQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如， $( \u0026quot;div\u0026quot; ).addClass( \u0026quot;new-class\u0026quot; ).css( \u0026quot;color\u0026quot;, \u0026quot;red\u0026quot; )\r// 给所有div元素加一个类\u0026quot;new-class\u0026quot;并把样式颜色设置为\u0026quot;red\u0026quot;\r这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用find和end。 3 创建元素 用append可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用prepend插入作为第一个子元素。appendTo实现与append相同的功能，只是语法不同，a.",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.github.io/blog/"
    }
  },
  "datePublished": "2020-08-12T07:06:00Z",
  "dateModified": "2020-08-12T07:06:00Z",
  "articleBody": "\u003cp\u003e这篇博文主要为了个人学习目的。\u003c/p\u003e\n\u003cp\u003ejQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。\u003c/p\u003e\n\u003ch2 id=\"1-获取元素\"\u003e1 获取元素\u003c/h2\u003e\n\u003cp\u003ejQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性\u003ccode\u003ejQuery\u003c/code\u003e给开发者以使用jQuery 的函数和属性等，\u003ccode\u003e$\u003c/code\u003e是\u003ccode\u003ejQuery\u003c/code\u003e的别名。例如，\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e$( document )     // 获取整个文档\r\n$( \u0026quot;*\u0026quot; )          // 获取所有元素\r\n$( \u0026quot;#elementID\u0026quot; ) // 获取ID为'elementID'的元素\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003ejQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery \u003ca href=\"https://api.jquery.com/category/selectors/\"\u003e选择器文档\u003c/a\u003e中提到。\u003c/p\u003e\n\u003cp\u003e在使用\u003ccode\u003e$\u003c/code\u003e获取到某些元素后还可以用继续用\u003ccode\u003efind\u003c/code\u003e获取其子元素。例如，\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e$( \u0026quot;#elementID\u0026quot; ).find( \u0026quot;div\u0026quot; )  // 在获取的elementID元素的子元素中获取div元素\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e值得注意的是\u003ccode\u003efind\u003c/code\u003e不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如，\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003econst allListElements = $( \u0026quot;li\u0026quot; )\r\n$( \u0026quot;div\u0026quot; ).find( allListElements )\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch2 id=\"2-链式操作\"\u003e2 链式操作\u003c/h2\u003e\n\u003cp\u003ejQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如，\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e$( \u0026quot;div\u0026quot; ).addClass( \u0026quot;new-class\u0026quot; ).css( \u0026quot;color\u0026quot;, \u0026quot;red\u0026quot; )\r\n// 给所有div元素加一个类\u0026quot;new-class\u0026quot;并把样式颜色设置为\u0026quot;red\u0026quot;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用\u003ccode\u003efind\u003c/code\u003e和\u003ccode\u003eend\u003c/code\u003e。\u003c/p\u003e\n\u003ch2 id=\"3-创建元素\"\u003e3 创建元素\u003c/h2\u003e\n\u003cp\u003e用\u003ccode\u003eappend\u003c/code\u003e可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用\u003ccode\u003eprepend\u003c/code\u003e插入作为第一个子元素。\u003ccode\u003eappendTo\u003c/code\u003e实现与\u003ccode\u003eappend\u003c/code\u003e相同的功能，只是语法不同，\u003ccode\u003ea.append(b)\u003c/code\u003e与\u003ccode\u003eb.appendTo(a)\u003c/code\u003e功能等价。\u003c/p\u003e\n\u003cp\u003e\u003ccode\u003eappend\u003c/code\u003e接受字符串、元素、jQuery 对象等作为参数。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e$( \u0026quot;body\u0026quot; ).append( \u0026quot;\u0026lt;p\u0026gt;\u0026lt;/p\u0026gt;\u0026quot; )\r\n$( \u0026quot;p\u0026quot; ).append( document.createTextNode(\u0026quot;Hi\u0026quot;) )\r\n$( \u0026quot;p\u0026quot; ).append( $( \u0026quot;strong\u0026quot; ) )\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch2 id=\"4-移动元素\"\u003e4 移动元素\u003c/h2\u003e\n\u003cp\u003e利用元素插入的函数实现。例如，\u003ccode\u003einsertAfter\u003c/code\u003e在目标元素后插入匹配元素，考虑如下HTML:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\u0026quot;container\u0026quot;\u0026gt;\r\n  \u0026lt;h2\u0026gt;Greetings\u0026lt;/h2\u0026gt;\r\n  \u0026lt;div class=\u0026quot;inner\u0026quot;\u0026gt;Hello\u0026lt;/div\u0026gt;\r\n  \u0026lt;div class=\u0026quot;inner\u0026quot;\u0026gt;Goodbye\u0026lt;/div\u0026gt;\r\n\u0026lt;/div\u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e在页面上选择\u003ccode\u003eh2\u003c/code\u003e并插入在\u003ccode\u003ediv\u003c/code\u003e后达到移动元素的目的。\u003cbr\u003e\n\u003ccode\u003e$( \u0026quot;h2\u0026quot; ).insertAfter($( \u0026quot;.container\u0026quot; ))\u003c/code\u003e结果为\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\u0026quot;container\u0026quot;\u0026gt;\r\n  \u0026lt;div class=\u0026quot;inner\u0026quot;\u0026gt;Hello\u0026lt;/div\u0026gt;\r\n  \u0026lt;div class=\u0026quot;inner\u0026quot;\u0026gt;Goodbye\u0026lt;/div\u0026gt;\r\n\u0026lt;/div\u0026gt;\r\n\u0026lt;h2\u0026gt;Greetings\u0026lt;/h2\u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e其他类似的函数还有\u003ccode\u003eafter\u003c/code\u003e, \u003ccode\u003einsertBefore\u003c/code\u003e, \u003ccode\u003ebefore\u003c/code\u003e, \u003ccode\u003eappendTo\u003c/code\u003e, \u003ccode\u003eappend\u003c/code\u003e, \u003ccode\u003eprependTo\u003c/code\u003e, \u003ccode\u003eprepend\u003c/code\u003e。需要注意的是这些函数的语法，特别是内容和目标元素的顺序以及函数返回的是内容对象还是目标元素对象。\u003c/p\u003e\n\u003ch2 id=\"5-修改元素属性\"\u003e5 修改元素属性\u003c/h2\u003e\n\u003cp\u003ejQuery 函数可以获取元素属性或设置元素属性。常见的有:\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e.addClass()     // 为每个匹配元素添加类\r\n.attr()         // 获取或设置第一个匹配元素的attribute\r\n.html()         // 获取或设置每一个匹配元素的html内容\r\n.prop()         // 获取或设置第一个匹配元素的property\r\n.removeAttr()   // 移除每一个匹配元素的一个或多个attribute\r\n.removeClass()  // 移除每一个匹配元素的一个或多个样式类\r\n.removeProp()   // 移除每一个匹配元素的一个或多个property\r\n.toggleClass()  // 添加或删除每一个匹配元素的样式类\r\n.val()          // 获取或设置第一个匹配元素的值\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e注意 attribute 和 property 区别。attribute 是 HTML 中键值对，property 是对应的DOM属性。\u003c/p\u003e"
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1598028633">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.github.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
    </div>
  </div>

  
</header>

  <main>
<div class="default-single">
  <div class="ax-title ax-l-o">
    <div class="ax-l-i max-w-680">
      <h1 class="post-title font-content-title font-normal leading-tight tracking-default text-40">jQuery 的功能</h1>

      <div class="ax-meta flex items-center mt-5">
        <div class="flex-grow min-w-0">
          <div class="flex items-center">
  <div class="flex-shrink-0">
    <img
    class="w-12 h-12 sm:w-14 sm:h-14 object-cover p-3px rounded-full border border-blue-300"
    src="/blog/images/author/default.webp"
    alt="Mia Zhao">
  </div>
  <div class="flex-shrink-0 ml-2 leading-tight font-content-sans">
    <a class="block text-sm text-raven-800 hover:text-raven-900 hover:underline focus:underline" target="_blank" rel="noopener nofollow" title="Mia Zhao" href="https://Mia-zhao.github.io/blog/">Mia Zhao</a>
    <time class="text-sm text-raven-500" datetime="2020-08-12T07:06:00Z">Aug 12, 2020 3:06PM</time>
  </div>
</div>

        </div>
        <div>
          <div class="flex items-center">
  <a class="flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=jQuery%20%e7%9a%84%e5%8a%9f%e8%83%bd%20by%20%40%25%21s%28%3cnil%3e%29%20https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fjquery-%25E7%259A%2584%25E5%258A%259F%25E8%2583%25BD%2f"><svg class="w-6 h-6 fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M32 6.078c-1.2.522-2.458.868-3.78 1.036 1.36-.812 2.398-2.088 2.886-3.626a13.11 13.11 0 0 1-4.16 1.588C25.742 3.794 24.026 3 22.154 3a6.56 6.56 0 0 0-6.556 6.562c0 .52.044 1.02.152 1.496-5.454-.266-10.28-2.88-13.522-6.862-.566.982-.898 2.106-.898 3.316a6.57 6.57 0 0 0 2.914 5.452 6.48 6.48 0 0 1-2.964-.808v.072c0 3.188 2.274 5.836 5.256 6.446-.534.146-1.116.216-1.72.216-.42 0-.844-.024-1.242-.112.85 2.598 3.262 4.508 6.13 4.57a13.18 13.18 0 0 1-8.134 2.798c-.538 0-1.054-.024-1.57-.1C2.906 27.93 6.35 29 10.064 29c12.072 0 18.672-10 18.672-18.668 0-.3-.01-.57-.024-.848C30.014 8.56 31.108 7.406 32 6.078z"/></svg>
</a>
  <a class="ml-3 flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Facebook" href="https://www.facebook.com/dialog/share?app_id=&display=page&href=https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fjquery-%25E7%259A%2584%25E5%258A%259F%25E8%2583%25BD%2f"><svg class="w-6 h-6 fill-current" viewBox="-7 -3.5 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M30.234 0H1.765C.8.001 0 .79 0 1.766v28.47C.001 31.2.79 32 1.766 32h15.328V19.625h-4.156V14.78h4.156v-3.564c0-4.134 2.523-6.384 6.21-6.384 1.766 0 3.284.13 3.726.2v4.32h-2.543c-2.006 0-2.394.953-2.394 2.352v3.085h4.797l-.625 4.844h-4.172V32h8.14C31.21 32 32 31.2 32 30.234V1.765C32 .8 31.21 0 30.234 0z"/></svg>
</a>
</div>

        </div>
      </div>
    </div>
  </div><div class="ax-content ax-l-o">
    <div class="ax-l-i max-w-680">
      <article class="cdata">
<p>这篇博文主要为了个人学习目的。</p>
<p>jQuery 是一个功能丰富的JavaScript 工具库，提供操作HTML、事件处理等API。以下简述jQuery 操作元素的功能。</p>
<h2 id="1-获取元素">1 获取元素</h2>
<p>jQuery 主要用法在于返回操作元素的API，然后通过API 操作来实现操控元素的目的。jQuery 库通过window 对象的属性<code>jQuery</code>给开发者以使用jQuery 的函数和属性等，<code>$</code>是<code>jQuery</code>的别名。例如，</p>
<pre><code>$( document )     // 获取整个文档
$( &quot;*&quot; )          // 获取所有元素
$( &quot;#elementID&quot; ) // 获取ID为'elementID'的元素
</code></pre><p>jQuery 在获取元素时接受CSS选择器作为参数以及jQuery 特有的选择器。所有合法的jQuery 选择器在jQuery <a href="https://api.jquery.com/category/selectors/">选择器文档</a>中提到。</p>
<p>在使用<code>$</code>获取到某些元素后还可以用继续用<code>find</code>获取其子元素。例如，</p>
<pre><code>$( &quot;#elementID&quot; ).find( &quot;div&quot; )  // 在获取的elementID元素的子元素中获取div元素
</code></pre><p>值得注意的是<code>find</code>不仅可以接受选择器为参数还接受元素或jQuery对象为参数，例如，</p>
<pre><code>const allListElements = $( &quot;li&quot; )
$( &quot;div&quot; ).find( allListElements )
</code></pre><h2 id="2-链式操作">2 链式操作</h2>
<p>jQuery 的函数返回jQuery 对象使得链式操作成为可能。链式操作使代码更简洁，在通过选择器获取元素时只需获取一次就能实现多重操作。例如，</p>
<pre><code>$( &quot;div&quot; ).addClass( &quot;new-class&quot; ).css( &quot;color&quot;, &quot;red&quot; )
// 给所有div元素加一个类&quot;new-class&quot;并把样式颜色设置为&quot;red&quot;
</code></pre><p>这样的操作可以多重进行下去，代码实现的功能也一目了然。如果要获取子元素或者返回子元素上一层，可以用<code>find</code>和<code>end</code>。</p>
<h2 id="3-创建元素">3 创建元素</h2>
<p>用<code>append</code>可以实现创建元素的目的，将特定内容插入到匹配元素的最后作为最后一个子元素。用<code>prepend</code>插入作为第一个子元素。<code>appendTo</code>实现与<code>append</code>相同的功能，只是语法不同，<code>a.append(b)</code>与<code>b.appendTo(a)</code>功能等价。</p>
<p><code>append</code>接受字符串、元素、jQuery 对象等作为参数。</p>
<pre><code>$( &quot;body&quot; ).append( &quot;&lt;p&gt;&lt;/p&gt;&quot; )
$( &quot;p&quot; ).append( document.createTextNode(&quot;Hi&quot;) )
$( &quot;p&quot; ).append( $( &quot;strong&quot; ) )
</code></pre><h2 id="4-移动元素">4 移动元素</h2>
<p>利用元素插入的函数实现。例如，<code>insertAfter</code>在目标元素后插入匹配元素，考虑如下HTML:</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;h2&gt;Greetings&lt;/h2&gt;
  &lt;div class=&quot;inner&quot;&gt;Hello&lt;/div&gt;
  &lt;div class=&quot;inner&quot;&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
</code></pre><p>在页面上选择<code>h2</code>并插入在<code>div</code>后达到移动元素的目的。<br>
<code>$( &quot;h2&quot; ).insertAfter($( &quot;.container&quot; ))</code>结果为</p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;inner&quot;&gt;Hello&lt;/div&gt;
  &lt;div class=&quot;inner&quot;&gt;Goodbye&lt;/div&gt;
&lt;/div&gt;
&lt;h2&gt;Greetings&lt;/h2&gt;
</code></pre><p>其他类似的函数还有<code>after</code>, <code>insertBefore</code>, <code>before</code>, <code>appendTo</code>, <code>append</code>, <code>prependTo</code>, <code>prepend</code>。需要注意的是这些函数的语法，特别是内容和目标元素的顺序以及函数返回的是内容对象还是目标元素对象。</p>
<h2 id="5-修改元素属性">5 修改元素属性</h2>
<p>jQuery 函数可以获取元素属性或设置元素属性。常见的有:</p>
<pre><code>.addClass()     // 为每个匹配元素添加类
.attr()         // 获取或设置第一个匹配元素的attribute
.html()         // 获取或设置每一个匹配元素的html内容
.prop()         // 获取或设置第一个匹配元素的property
.removeAttr()   // 移除每一个匹配元素的一个或多个attribute
.removeClass()  // 移除每一个匹配元素的一个或多个样式类
.removeProp()   // 移除每一个匹配元素的一个或多个property
.toggleClass()  // 添加或删除每一个匹配元素的样式类
.val()          // 获取或设置第一个匹配元素的值
</code></pre><p>注意 attribute 和 property 区别。attribute 是 HTML 中键值对，property 是对应的DOM属性。</p>

      </article>
      

      

    </div>
  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1598028633"></script>


</body>
</html>
